import '@/styles/globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { ThemeProvider } from './context/ThemeContext';
import ThemeSelector from './components/ThemeSelector';
import MobileMenu from './components/MobileMenu';

const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });

export const metadata: Metadata = {
  title: '余莉莎 | 个人网站',
  description: '余莉莎的个人网站，展示专业技能、业务板块及个人介绍',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body className={`${inter.variable} font-sans`}>
        <ThemeProvider>
          <header className="bg-primary-500 text-white shadow-md">
            <div className="container mx-auto px-4 py-4 flex justify-between items-center">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 rounded-full overflow-hidden border-2 border-white">
                  <img src="/images/Photo01.jpg" alt="余莉莎" className="w-full h-full object-cover" />
                </div>
                <div className="text-2xl font-bold">余莉莎</div>
              </div>
              <nav className="hidden md:flex items-center space-x-6">
                <a href="#about" className="hover:text-primary-200 transition-colors">关于我</a>
                <a href="#services" className="hover:text-primary-200 transition-colors">业务板块</a>
                <a href="/projects" className="hover:text-primary-200 transition-colors">项目案例</a>
                <a href="/career" className="hover:text-primary-200 transition-colors">职业经历</a>
                <a href="/certifications" className="hover:text-primary-200 transition-colors">专业资质</a>
                <a href="/skills" className="hover:text-primary-200 transition-colors">专业技能</a>
                <a href="/faq" className="hover:text-primary-200 transition-colors">常见问题</a>
                <a href="#contact" className="hover:text-primary-200 transition-colors">联系方式</a>
                <ThemeSelector />
              </nav>
              <MobileMenu />
            </div>
          </header>
          <main>{children}</main>
          <footer className="bg-gray-800 text-white py-8">
            <div className="container mx-auto px-4">
              <div className="text-center">
                <p>&copy; {new Date().getFullYear()} 余莉莎. 保留所有权利.</p>
              </div>
            </div>
          </footer>
        </ThemeProvider>
      </body>
    </html>
  );
} 